<template>
    <div class="wei">

        <component :is="layoutComponents[layout]"></component>
        <ThemeDrawer></ThemeDrawer>

        <!-- 制作水印 -->
        <div class="content-yao" v-watermarker="{text:staffName,textColor: 'rgba(0, 0, 0, 0.2)' }"></div>

    </div>
</template>

<script setup name="watermarkDirect">
import LayoutVertical from "./LayoutVertical/index.vue"
import LayoutColumns from "./layoutColumns/index.vue"

import ThemeDrawer from "./components/themeDrawer/index.vue"
import { mainStore } from "@/stores"
import { storeToRefs } from "pinia"
import {ref,computed} from "vue"
// 制作水印的自定义指令
import vWatermarker from "@/directives/modules/watermarkes.js"


let mStore = mainStore()

const { layout } = storeToRefs(mainStore())

let staffName = computed(()=>{
    return mStore.userinfo.name
})


let layoutComponents = {
    vertical: LayoutVertical,
    columns: LayoutColumns
}


</script>

<style lang="scss" scoped>
.wei {
    min-width: 1280px;
    position: relative;

    .content-yao {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        pointer-events: none; /* 此属性使鼠标不会捕获当前dom，而是捕获dom得下一层; */
        // background-color: rgba(180, 180, 180, 0.6);
        z-index: 100;
    }
}
</style>